<template>
	<view style="background-color: rgb(250, 250, 250);height: 100vh;">


		<view class="top">
			<view :class="status==1?'top1':'top2'" @click="changestatus(1)">
				近期活动
			</view>
			<view :class="status==2?'top1':'top2'" @click="changestatus(2)">
				比邻期刊
			</view>
		</view>
		<view class="" v-show="status==1">

			<view class="box" v-for="(item,index) in list" :key="index"
				@click="$gopage('/pages/center/huodong/info?id='+item.id,1,1)">
				<image class="box" src="../../../static/hdboxbj.png" mode=""></image>
				<view class="box1">
					<view style="width: 200rpx; height: 200rpx; overflow: hidden; border-radius: 10rpx;">
						<image :src="item.thumb" mode="widthFix" style="width: 100%;"></image>
					</view>
					<view class="box1-1">
						<view class="box1-1-1">
							<view class="box1-1-1biao"
								:style="item.price>0?'background-image: url(../../../static/huodbiao1.png);':''">
								{{item.price>0?'付费':'公益'}}
							</view>
							<view class="box1-1-1text">
								{{item.title}}
							</view>
							<view class="box1-1-1text1">
								进行中
							</view>
						</view>
						<view class="box1-1-2">
							<image src="../../../static/hdsz.png" mode=""></image>
							<view class="box1-1-2text">
								报名时间：{{item.stime}}-{{item.etime}}
							</view>
						</view>
						<view class="box1-1-3">
							<view class="box1-1-3ann">
								报名
							</view>
						</view>
					</view>
				</view>
			</view>


			<view class="bottom" @click="$gopage('/pages/center/huodong/myhuodong',1)">
				<view class="bottom1">
					我的活动
				</view>
				<image src="/static/yfh.png" mode=""></image>
			</view>
			<quesheng v-if="status==1&&list.length==0" title="活动"></quesheng>

		</view>



		<view class="title" v-show="status==2">
			<quesheng v-if="list.length==0" title="期刊"></quesheng>
			<view v-for="(item,index) in list" :key="index"
				@click="$gopage('/pages/center/huodong/qikaninfo?id='+item.id,1,1)">
				<view class="title1">
					{{item.ctime}}
				</view>
				<view class="title2">
					<view class="title2thumb">
						<image :src="item.thumb" mode="widthFix" style="width: 100%;"></image>
					</view>

					<view class="title2-1">
						<view class="title2-1text">
							{{item.title}}
						</view>
						<view class="title2-1text1">
							{{item.desc}}
						</view>
					</view>

				</view>
			</view>

		</view>
	</view>
</template>

<script>
	//首页
	import quesheng from '../../../components/quesheng.vue'
	var that = this;
	export default {
		components: {
			quesheng
		},
		data() {
			return {
				bartop: 0,
				titles: 0,
				list: [],
				nextp: 1,
				status: 1
			}
		},
		onLoad(e) {
			that = this;
			this.bartop = this.$bartop;
		},
		onShow() {
			that.getlist()
		},
		methods: {
			changestatus(e) {
				this.status = e
				that.list = [];
				that.nextp = 1;
				that.getlist();
			},
			getlist() {
				var p = that.nextp ? that.nextp : '';
				if (p) {
					uni.showLoading({
						title: '加载中...'
					})
					that.$post('api/activitylist', {
						p: p,
						status: that.status
					}).then(res => {
						uni.hideLoading()
						if (p == 1) {
							that.list = res.data.list;
						} else {
							var list = res.data.list;
							if (list) {
								for (var i = 0; i < list.length; i++) {
									that.list.push(list[i]);
								}
							}
						}
						that.nextp = res.data.nextp;
						console.log(that.list);
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.top {
		width: 100vw;
		// padding-top: 200rpx;
		margin-bottom: 20rpx;
		display: flex;
		background-color: white;
		justify-content: space-around;

		.top1 {
			padding: 10rpx 0;
			font-size: 30rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 600;
			color: #333333;
			border-bottom: rgb(255, 174, 69) solid 4rpx;

		}

		.top2 {
			padding: 10rpx 0;
			font-size: 30rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 600;
			color: #333333;
		}
	}

	.box {
		margin: 20rpx auto;
		width: 689rpx;
		height: 243rpx;

		.box1 {
			width: 689rpx;
			margin: 0 auto;
			margin-top: -250rpx;
			display: flex;

			>image {
				margin-left: 20rpx;
				width: 200rpx;
				height: 200rpx;
			}

			.box1-1 {
				margin-left: 20rpx;

				.box1-1-1 {
					display: flex;
					align-items: center;

					.box1-1-1biao {
						margin-right: 20rpx;
						background-image: url('../../../static/huodbiao.png');
						background-size: 60rpx;
						width: 60rpx;
						height: 25rpx;
						font-size: 18rpx;
						text-align: center;
						font-family: Alibaba PuHuiTi;
						font-weight: 500;
						color: #FFFFFF;
						text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
					}

					.box1-1-1text {
						width: 300rpx;
						font-size: 24rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 500;
						color: #333333;
					}

					.box1-1-1text1 {
						margin-left: 40rpx;
						transform: rotate(45deg);
						font-size: 14rpx;
						color: #FFFFFF;
					}
				}

				.box1-1-2 {
					margin-top: 20rpx;
					display: flex;
					align-items: center;

					>image {
						width: 20rpx;
						height: 20rpx;
						margin-right: 20rpx;
					}

					.box1-1-2text {
						font-size: 18rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 400;
						color: #999999;
					}
				}

				.box1-1-3 {
					display: flex;
					flex-direction: row-reverse;
					margin-top: 50rpx;

					.box1-1-3ann {
						margin-right: 20rpx;
						font-size: 24rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 500;
						line-height: 52rpx;
						text-align: center;
						color: #FFFFFF;
						width: 138rpx;
						height: 52rpx;
						background-color: rgb(255, 174, 69);
						border-radius: 26rpx;
					}

					.box1-1-3ann2 {
						margin-right: 20rpx;
						font-size: 24rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 500;
						line-height: 52rpx;
						text-align: center;
						color: #000000;
						width: 138rpx;
						height: 52rpx;
						background-color: rgb(178, 187, 173);
						border-radius: 26rpx;
					}
				}
			}
		}
	}

	.bottom {
		margin-top: 40rpx;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;

		.bottom1 {
			font-size: 24rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 500;
			color: #FE8108;
		}

		>image {
			margin-left: 20rpx;
			width: 11rpx;
			height: 20rpx;
		}
	}

	.title {
		width: 100vw;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title1 {
			margin: 10rpx auto;
			color: #999999;
			text-align: center;
		}

		.title2thumb {
			width: 726rpx;
			height: 280rpx;
			overflow: hidden;
		}

		.title2 {
			width: 726rpx;
			height: 477rpx;
			margin-left: auto;
			margin-right: auto;
			box-shadow: 0rpx 0rpx 10rpx 0rpx #999999;
			border-radius: 20rpx;
			overflow: hidden;

			.title2-1 {
				margin-top: 20rpx;
				margin-left: 20rpx;

				.title2-1text {
					margin-bottom: 20rpx;
					font-size: 30rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 600;
					color: #333333;
				}

				.title2-1text1 {
					font-size: 24rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					color: #999999;
				}
			}
		}
	}
</style>
